<template>
  <view class="custom-navbar" :style="navbarStyle">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 导航栏 -->
    <view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
      <!-- 左侧返回按钮 -->
      <view class="nav-left" v-if="showBack" @click="handleBack">
        <u-icon name="arrow-left" :size="backIconSize" :color="backIconColor"></u-icon>
        <text v-if="backText" class="back-text" :style="{ color: backTextColor }">{{ backText }}</text>
      </view>
      
      <!-- 中间标题 -->
      <view class="nav-center" :style="{ color: titleColor, marginRight: marginRight }">
        <text class="nav-title" :style="{ fontSize: titleSize + 'rpx', lineHeight: navBarHeight + 'px' }">{{ title }}</text>
      </view>
      
      <!-- 右侧自定义内容 -->
      <view class="nav-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync()
let menuButtonInfo = {}

// 如果是小程序，获取右上角胶囊的尺寸信息
// #ifdef MP-WEIXIN
try {
  menuButtonInfo = uni.getMenuButtonBoundingClientRect()
} catch (e) {
  console.log('获取胶囊信息失败', e)
}
// #endif

export default {
  name: 'CustomNavbar',
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 标题颜色
    titleColor: {
      type: String,
      default: '#ffffff'
    },
    // 标题大小
    titleSize: {
      type: Number,
      default: 36
    },
    // 背景色
    backgroundColor: {
      type: String,
      default: ''
    },
    // 是否显示返回按钮
    showBack: {
      type: Boolean,
      default: false
    },
    // 返回按钮颜色
    backIconColor: {
      type: String,
      default: '#ffffff'
    },
    // 返回按钮大小
    backIconSize: {
      type: Number,
      default: 44
    },
    // 返回按钮文字
    backText: {
      type: String,
      default: ''
    },
    // 返回按钮文字颜色
    backTextColor: {
      type: String,
      default: '#ffffff'
    },
    // 自定义返回逻辑
    customBack: {
      type: Function,
      default: null
    }
  },
  
  data() {
    return {
      // 系统状态栏高度
      statusBarHeight: systemInfo.statusBarHeight || 0,
      // 导航栏高度
      navBarHeight: 44,
      // 右边距
      marginRight: '0rpx'
    }
  },
  
  computed: {
    /**
     * 导航栏样式
     */
    navbarStyle() {
      let background = this.backgroundColor || '#74b9ff'
      return {
        background: background
      }
    }
  },
  
  mounted() {
    this.setNavBarHeight()
    this.calculateMarginRight()
  },
  
  methods: {
    /**
     * 设置导航栏高度，确保与胶囊按钮对齐
     */
    setNavBarHeight() {
      // #ifdef MP-WEIXIN
      if (menuButtonInfo.height) {
        // 计算导航栏高度：胶囊按钮高度 + 胶囊按钮上下边距
        const menuButtonPadding = (menuButtonInfo.top - this.statusBarHeight) * 2
        this.navBarHeight = menuButtonInfo.height + menuButtonPadding
      }
      // #endif
      
      // #ifndef MP-WEIXIN
      this.navBarHeight = 44
      // #endif
    },
    
    /**
     * 计算标题右边距，确保居中显示
     */
    calculateMarginRight() {
      // #ifdef MP-WEIXIN
      if (menuButtonInfo.width) {
        // 胶囊按钮宽度 + 胶囊按钮右边距 = 需要预留的右边距
        const windowWidth = systemInfo.windowWidth || 375
        const menuButtonRight = windowWidth - menuButtonInfo.left
        this.marginRight = menuButtonRight + 'px'
      }
      // #endif
      
      // #ifndef MP-WEIXIN
      this.marginRight = '0rpx'
      // #endif
    },
    
    /**
     * 处理返回按钮点击
     */
    handleBack() {
      if (this.customBack && typeof this.customBack === 'function') {
        this.customBack()
      } else {
        uni.navigateBack()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  
  .status-bar {
    width: 100%;
  }
  
  .nav-bar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    
    .nav-left {
      position: absolute;
      left: 32rpx;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      z-index: 2;
      
      .back-text {
        font-size: 32rpx;
        margin-left: 8rpx;
      }
    }
    
    .nav-center {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .nav-title {
        font-weight: bold;
        text-align: center;
        text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      }
    }
    
    .nav-right {
      position: absolute;
      right: 32rpx;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
    }
  }
}
</style> 